<script>
	import InfoItem from "./components/infoItem.vue"
	export default {
		components: {
			InfoItem
		},
		data() {
			return {
				serviceModalShow: true,
				id: 1
			}
		},
		methods: {
			submit() {
				uni.navigateTo({
					url: "/pages/publish/formControl/result"
				})
			},
			goServiceSetting() {
				uni.navigateTo({
					url: "/pages/publish/formControl/serviceForm"
				})
			},
			back() {
				// uni.navigateBack()
				this.cback()
			}
		}
	}
</script>

<template>
	<view class="publish flex between flex-col">
		<div style="height:50rpx"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('确认订单')}}
		</div>

		<div class="content p-30 flex-1" style="padding-top: 0;overflow: auto;">
			<div class="bg-white rounded-26 p-15 ">
				<div class="w-full rounded-16  flex p-20 between" style="min-height:100rpx">
					<div class="flex">
						<image src="/static/icon/start.png" mode="widthFix" class="w-40"></image>
						<div class="ml-24">
							<div class="fz32 font-bold text-111"> {{$t('中')}}交香颂B座B10</div>
							<div class="fz24 mt-12 text-888">{{$t('黑龙江省哈尔滨市南岗区鲁谷街道鲁谷大街')}}(null)</div>
						</div>
					</div>
					<div class="flag">
						<flag class="w-50" :country="0" />
					</div>
				</div>
				<div class="w-full rounded-16  flex p-20 between mt-15" style="min-height:100rpx">
					<div class="flex">
						<image src="/static/icon/way.png" mode="widthFix" class="w-40"></image>
						<div class="ml-24">
							<div class="fz32 font-bold text-111"> {{$t('中')}}交香颂B座B10</div>
							<div class="fz24 mt-12 text-888">{{$t('黑龙江省哈尔滨市南岗区鲁谷街道鲁谷大街')}}(null)</div>
						</div>
					</div>
					<div class="flag">
						<flag class="w-50" :country="0" />
					</div>
				</div>
				<div class="w-full rounded-16  flex p-20 between mt-15" style="min-height:100rpx">
					<div class="flex">
						<image src="/static/icon/end.png" mode="widthFix" class="w-40"></image>
						<div class="ml-24">
							<div class="fz32 font-bold text-111"> {{$t('中')}}交香颂B座B10</div>
							<div class="fz24 mt-12 text-888">{{$t('黑龙江省哈尔滨市南岗区鲁谷街道鲁谷大街')}}(null)</div>
						</div>
					</div>
					<div class="flag">
						<image src="/static/icon/ru.png" mode="widthFix" class="w-50"></image>
					</div>
				</div>
			</div>

			<div class="bg-white rounded-26 p-20 mt-20">

				<InfoItem :label="$t('货物名称')" value="钢	笔" class="mt-20" />
				<InfoItem :label="$t('包装方式')" :value="$t('纸箱装')" class="mt-40" />
				<InfoItem :label="$t('货物重量')" value="1kg" class="mt-40" />
				<InfoItem :label="$t('货物体积')" value="0.01m³" class="mt-40" />
				<InfoItem :label="$t('货物密度')" value="102kg/m³" valueColor="#278AFF" class="mt-40" />
				<InfoItem :label="$t('货物件数')" value="1件" class="mt-40" />
				<InfoItem :label="$t('付款方式')" :value="$t('寄付现结')" class="mt-40" />
				<InfoItem :label="$t('装货时间')" value="2012-12-12 12:12:12" class="mt-40" />

				<div class="between mt-40">
					<div class="flex">
						<div class="text-555 fz28">{{$t('货主出价')}}</div>
					</div>
				</div>
				<div class="between mt-20">
					<div class="relative flex-1">
						<div class="fz30 text-888 h-80 center pb-5 pl-30" style="position: absolute;left: 0;top: 0;;">￥
						</div>
						<input type="number" class="rounded-18 bg-gray-700 h-80 w-full mr-30 fz28"
							style="padding-left: 80rpx;" :placeholder="$t('请输入出价')">
					</div>
					<div class="rounded-18 bg-gray-700 h-80 w-100 center text-blue-2 ml-30">$/₽</div>
				</div>

			</div>




			<div class="flex fz24 text-888 mt-20">
				<radio value="" class="mt-5" style="transform: scale(0.8);" />
				{{$t('我已阅读并同意《货运区间服务相关协议')}}》
			</div>

			<div style="height: 200rpx;"></div>
		</div>




		<div class="form-control p-30 bg-white">
			<div class="submit center h-100 bg-primary text-white fz32 rounded-50" @click="submit">
				{{$t('立即下单')}}
			</div>
		</div>

	</view>
</template>



<style lang="less">
	.flag {
		border-left: 1rpx solid #ddd;
		padding-left: 20rpx;
	}

	.relative {
		position: relative;
	}

	.bg-gray-700 {
		background: #F7F7F7;
	}

	.file-item {
		background-color: #F7F7F7;
		border-radius: 18rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx;
	}

	.count {
		background-color: #F7F7F7;
		height: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 300rpx;
		border-radius: 25rpx;
		overflow: hidden;

		.span {
			color: #1d1d1d;
			width: 100rpx;
			height: 50rpx;
			display: flex;
			background-color: #F3F3F3;
			align-items: center;
			justify-content: center;

			&:active {
				background-color: #ddd;
			}
		}

		.input {
			text-align: center;
			font-size: 28rpx;
		}
	}

	.radio {
		border: 1rpx solid #999;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
	}

	.checked {
		border: 8rpx solid #278AFF;
	}

	.bg-gray-600 {
		background-color: #F6F7FB;
	}

	.form-control {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 9;
	}

	.header {
		font-size: 34rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		padding-top: var(--status-bar-height);
	}

	.back {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 15rpx;
	}

	page {
		height: 100%;
		width: 100%;
	}

	.publish {
		height: 100%;
		align-items: stretch;
		background: #F6F7FB url("/static/bg/publish.png") no-repeat;

	}
</style>